<template>
  <div class="message-container" :class="messageClass">
    <div class="message-bubble" :class="bubbleClass">
      <div class="message-content">{{ message.content }}</div>
      <div class="message-time">{{ formatTime(message.timestamp) }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Message } from '../utils/api';

interface Props {
  message: Message;
  theme?: 'love-master' | 'agent';
}

const props = withDefaults(defineProps<Props>(), {
  theme: 'love-master'
});

const messageClass = computed(() => {
  return {
    'message-user': props.message.sender === 'user',
    'message-ai': props.message.sender === 'ai'
  };
});

const bubbleClass = computed(() => {
  const baseClass = props.message.sender === 'user' ? 'bubble-user' : 'bubble-ai';
  const themeClass = props.theme === 'love-master' ? 'theme-love-master' : 'theme-agent';
  return `${baseClass} ${themeClass}`;
});

const formatTime = (timestamp: Date): string => {
  return new Intl.DateTimeFormat('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  }).format(timestamp);
};
</script>

<style scoped>
.message-container {
  display: flex;
  margin-bottom: var(--spacing-4);
  padding: 0 var(--spacing-4);
  animation: slideUp 0.3s ease-out;
}

.message-user {
  justify-content: flex-end;
}

.message-ai {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 70%;
  min-width: 120px;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-2xl);
  position: relative;
  word-wrap: break-word;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.message-bubble:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.bubble-user {
  color: var(--color-white);
  margin-left: auto;
  font-weight: var(--font-weight-medium);
}

.bubble-user.theme-love-master {
  background: linear-gradient(135deg, var(--color-love-master), var(--color-love-master-dark));
}

.bubble-user.theme-agent {
  background: linear-gradient(135deg, var(--color-agent), var(--color-agent-dark));
}

.bubble-ai {
  background: var(--color-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-base);
  backdrop-filter: blur(10px);
}

.bubble-user::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.bubble-user.theme-love-master::after {
  border-left-color: var(--color-love-master-dark);
}

.bubble-user.theme-agent::after {
  border-left-color: var(--color-agent-dark);
}

.bubble-ai::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 8px solid var(--color-border-base);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.message-content {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-1);
  white-space: pre-wrap;
  word-break: break-word;
}

.message-time {
  font-size: var(--font-size-xs);
  opacity: 0.7;
  text-align: right;
  font-weight: var(--font-weight-normal);
  color: inherit;
}

.bubble-ai .message-time {
  text-align: left;
  color: var(--color-text-secondary);
}

/* 响应式设计 */
/* 平板端 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .message-bubble {
    max-width: 75%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
  }
  
  .message-container {
    padding: 0 var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
}

/* 手机端 (< 768px) */
@media (max-width: 767px) {
  .message-bubble {
    max-width: 85%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-xl);
  }
  
  .message-container {
    padding: 0 var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
  
  .message-content {
    line-height: var(--line-height-normal);
  }
  
  .message-time {
    font-size: 10px;
  }
}

/* 小屏手机端 (< 480px) */
@media (max-width: 479px) {
  .message-bubble {
    max-width: 90%;
    padding: var(--spacing-2);
    font-size: 11px;
    min-width: 80px;
  }
  
  .message-container {
    padding: 0 var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
  
  .bubble-user::after,
  .bubble-ai::after {
    border-width: 6px;
  }
  
  .bubble-user::after {
    right: -6px;
  }
  
  .bubble-ai::after {
    left: -6px;
  }
}

/* 大屏幕优化 (> 1280px) */
@media (min-width: 1280px) {
  .message-bubble {
    max-width: 60%;
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-base);
  }
  
  .message-container {
    padding: 0 var(--spacing-6);
    margin-bottom: var(--spacing-5);
  }
  
  .message-time {
    font-size: var(--font-size-sm);
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .message-bubble:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  
  .message-bubble:active {
    transform: scale(0.98);
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .message-container {
    margin-bottom: var(--spacing-2);
  }
  
  .message-bubble {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .message-container {
    animation: none;
  }
  
  .message-bubble:hover {
    transform: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .bubble-ai {
    border: 2px solid var(--color-border-dark);
  }
  
  .bubble-user {
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .message-time {
    opacity: 1;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .bubble-ai {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  
  .bubble-ai::after {
    border-right-color: var(--color-gray-600);
  }
}
</style>